<!-- 角色查看 -->
<template>
    <div class="add-user">
        <div class="search-con" v-if="false">
            <Input @on-change="handleClear" clearable placeholder="请输入姓名搜索" v-model="userSearch" class="searchInput"/>
            <Button @click="handleSearch" class="searchBtn" type="primary">
                <Icon custom="iconfont icon-sousuo" :size="16"/><span>搜索</span>
            </Button>
        </div>
        <Table @on-selection-change="orgUserSelected" @on-select-cancel="cancelOrg" border ref="selection" :columns="columns" :data="data" :stripe="true" class='assign'></Table>
        <Page :total="pageTotal" :current="pageno" :page-size="pageSize" @on-change="handlePage" prev-text="上一页" next-text="下一页" />
    </div>
</template>

<script>
import {getOrgs} from "@/api/org.js"
export default {
    props:{
        addUserOrgId:{
            type:Number,
            default:null
        },
        orgUserData:{
            type:Array,
            default:[]
        },
    },
    data () {
        return {
            userSearch:'',
            pageTotal:null,
            pageno:1,
            pageSize:10,
            orgIds:[],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                title: "项目点",
                key: "name",
                },
                {
                title: "ID",
                key: "orgId",
                },
            ],
            data: []
        };
    },

    methods: {
        handleClear (e) {
            if (e.target.value === '') {
                this.userSearch='';
                let data = {
                pageno: 1,
                keyword:this.userSearch,
                }
                this.getAddOrgData()
            }
        },
        handleSearch () {
            let data = {
                keyword:this.userSearch,
            }
            this.getAddOrgData(data)
        },
        handlePage(value) {
            this.pageno = value
            let data = {
                pageno: value,
                keyword:this.userSearch,
            }
            this.getAddOrgData(data)
        },
        getAddOrgData(data){
            getOrgs(data).then(res=>{
                let orgs = res.data.data.list;
                orgs.map(item=>{
                    this.orgUserData.map(e=>{
                        if(e.orgId == item.orgId){
                            item._disabled = true
                        }
                    })
                    this.orgIds.map(e=>{
                        if(e == item.orgId){
                            item._checked = true;
                        }
                    })
                });
                this.data = orgs.filter(e=>{
                    return e.state == 2;
                })
                this.pageTotal = res.data.data.total;
            })
        },
        orgUserSelected(selection){
            let orgIds = [];
            if(selection.length == 0){
                this.orgIds = orgIds;
            }else{
                selection.forEach(element => {
                    orgIds.push(element.orgId);
                });
                if(this.orgIds.length == 0){
                    this.orgIds = orgIds;
                }else{
                    orgIds.forEach(e=>{
                        if(!this.orgIds.includes(e)) this.orgIds.push(e);
                    })
                }
            }
            this.$emit('selectedRoleUser',this.orgIds)
        },
        cancelOrg(selection,row){
            let index = this.orgIds.indexOf(row.orgId);
            this.orgIds.splice(index,1);
        }
    },

    computed: {},
    updated(){
        //   this.getAddOrgData(this.addUserOrgId); 
        //   console.log(this.addUserOrgId);
        
    },
    mounted(){
        this.orgIds = [];
        this.getAddOrgData(); 
    },

    components: {},

}

</script>
<style lang='less'>
.add-user{
    padding: 0 10px;
    .search-con{
        padding-bottom: 15px;
        .searchBtn,.addBtn{
            margin-left: 10px;
            font-size: 14px;
            height: 32px;
            .icon-sousuo{
                padding-right: 5px;
                padding-bottom: 2px;
            }
            span{
                vertical-align: baseline;
            }
        }
        .searchInput{
            width: 200px;
        }
    }  
}
    .assign{
    margin-bottom: 15px;
    table{
        th,td{
            font-size: 14px;
            .ivu-btn:hover{
                background: none;
                color: #ed4014 !important;
                text-decoration: underline;
                border-color: transparent;
            }
        }
    }
}
</style>